<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>题目详情</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		//		$(document).ready(function() {
		//			$("#name").focus();
		//			$("#inputForm").validate({
		//				submitHandler: function(form){
		//					loading('正在提交，请稍等...');
		//					form.submit();
		//				},
		//				errorContainer: "#messageBox",
		//				errorPlacement: function(error, element) {
		//					$("#messageBox").text("输入有误，请先更正。");
		//					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
		//						error.appendTo(element.parent().parent());
		//					} else {
		//						error.insertAfter(element);
		//					}
		//				}
		//			});
		//		});
		var countdown=10;
		function setTime(val) {
			if (countdown == 0) {
				val.removeAttribute("disabled");
				val.value="免费获取验证码";
				countdown = 10;
			} else {
				val.setAttribute("disabled", true);
				val.value="重新发送(" + countdown + ")";
				countdown--;
			}
			setTimeout(function() {
				setTime(val)
			},1000)
		}

		//		//创建赛题
		//		window.onload = myfun;
		//		function myfun()
		//		{
		//			var time = document.getElementById("time").value;
		//			console.info("time111="+time);
		//			tiem(time);
		//		}

		//		function aa(ctfEnvironmentId){
//			alert("dddfff");

			//------------进度条----------------
//			document.getElementById("kk").style.display="";
//			var pro=0;//设置进度条的初始值
//			var proBar = setInterval(function(){
//
//				pro++;
//				document.getElementById("progress").style.width=pro+"%";
//				document.getElementById("ww").innerText= pro+"%";
//				if(pro == 100){
//					clearInterval(proBar);
//					document.getElementById("now").style.display="none";
//					document.getElementById("now-time-id").style.display="";
//					document.getElementById("now-extended").style.display="";
//				}
//			},10);

			document.getElementById("kk").style.display="";
			var pro=0;//设置进度条的初始值
			var proBar = setInterval(function(){

				pro++;
				document.getElementById("progress").style.width=pro+"%";
				document.getElementById("ww").innerText= pro+"%";
				if(pro == 99){
					clearInterval(proBar);
				}
			},400);

		<%--$.ajax({--%>
		<%--type: "POST",--%>
		<%--url: "${ctx}/resource/resourceCtfSubject/createCtfInstance",--%>
		<%--data: {--%>
		<%--ctfEnvironmentId:ctfEnvironmentId--%>
		<%--},--%>
		<%--success: function (list) {--%>
		<%--console.info(list[1]+" "+list[0]);--%>
		<%--document.getElementById("link").innerHTML = list[1];--%>
		<%--document.getElementById("link").href=list[1];--%>
		<%--document.getElementById('time').value=list[0];--%>

		<%--document.getElementById("now").style.display="none";--%>
		<%--document.getElementById("now-time-id").style.display="";--%>
		<%--document.getElementById("now-extended").style.display="";--%>

		<%--},--%>
		<%--error:function(){--%>
		<%--alert("创建赛题失败");--%>

		<%--}--%>
		<%--});--%>

		<%--}--%>

		<%--//倒计时--%>
		<%--var  timer1;--%>
		<%--function tiem(time){--%>
		<%--var intDiff = parseInt(time);//倒计时总秒数量--%>
		<%--function timer(intDiff) {--%>
		<%--timer1 =  window.setInterval( function () {--%>
		<%--var day = 0,--%>
		<%--hour = 0,--%>
		<%--minute = 0,--%>
		<%--second = 0;//时间默认值--%>
		<%--if (intDiff > 0) {--%>
		<%--day = Math.floor(intDiff / (60 * 60 * 24));--%>
		<%--hour = Math.floor(intDiff / (60 * 60)) - (day * 24);--%>
		<%--minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);--%>
		<%--second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);--%>
		<%--}--%>
		<%--if (minute <= 9) minute = '0' + minute;--%>
		<%--if (second <= 9) second = '0' + second;--%>
		<%--$('#day_show').html(day + "天");--%>
		<%--$('#hour_show').html('<s id="h"></s>' + hour + ':');--%>
		<%--$('#minute_show').html('<s></s>' + minute + ':');--%>
		<%--$('#second_show').html('<s></s>' + second);--%>
		<%--intDiff--;--%>
		<%--}, 1000);--%>
		<%--}--%>
		<%--$(function () {--%>
		<%--timer(intDiff);--%>
		<%--});--%>
		<%--}--%>


		<%--function shut(){--%>
		<%--document.getElementById("kk").style.display="none";--%>

		<%--document.getElementById("now").style.display="";--%>
		<%--document.getElementById("now-time-id").style.display="none";--%>
		<%--document.getElementById("now-extended").style.display="none";--%>
		<%--document.getElementById("overtime").style.display="none";--%>
		<%--}--%>

		<%--function overtime(){--%>
		<%--document.getElementById("overtime").style.display="";--%>
		<%--document.getElementById("prolong").value="0";--%>
		<%--}--%>


		<%--function btn(){--%>
		<%--window.clearInterval(timer1);--%>
		<%--document.getElementById("overtime").style.display="none";--%>
		<%--var prolong = document.getElementById("prolong").value;--%>
		<%--$.ajax({--%>
		<%--type: "POST",--%>
		<%--url: "${ctxf}/race/raceLogin/testteam",--%>
		<%--data: {--%>
		<%--prolong:prolong--%>
		<%--},--%>
		<%--success: function (time) {--%>
		<%--tiem(time);  //从新调用定时器--%>
		<%--},--%>
		<%--error:function(){--%>
		<%--console.info("error");--%>
		<%--}--%>
		<%--});--%>
		<%--}--%>


		function judge1()
		{
			var answer=document.getElementById("answer").value;
			var userAnswer=document.getElementById("userAnswer").value;
			var answerSituation=document.getElementById("answerSituation").value;
			var judge = document.getElementById("judge").value;
			var user = document.getElementById("user").value;
			var userId = document.getElementById("userId").value;
			var paw = document.getElementById("paw").value;
			var repertoryId = document.getElementById("repertoryId").value;
			var scheduleId = document.getElementById("scheduleId").value;
			var subjectId = document.getElementById("subjectId").value;
			var resourceCtfSubject = document.getElementById("resourceCtfSubject").value;

			if(answer==userAnswer)
			{


				$("#answerSituation").html("已解答");
				$.ajax({
					type: "POST",
					url: "${ctxf}/race/raceLogin/flag",
					data: {
						flag: userAnswer,
						usetID: userId,
						repertoryId: repertoryId,
						scheduleId: scheduleId,
						subjectId: subjectId
					},
					success: function () {
						$.jBox($("#right").html(), {
							title: "消息提示", buttons: {"关闭": true}, submit: function () {
								window.location.href = "${ctxf}/race/raceLogin/login?judge=" + judge + "&user=" + user + "&paw=" + paw + "&repertoryId=" + repertoryId + "&scheduleId=" + scheduleId;
							}
						});
					},
					error:function(){
					}
				});

			}else{
				$.jBox($("#wrong").html(), {
					title: "消息提示", buttons: {"关闭": true}, submit: function () {
						window.location.href = "${ctxf}/race/raceLogin/login?judge=" + judge + "&user=" + user + "&paw=" + paw + "&repertoryId=" + repertoryId + "&scheduleId=" + scheduleId;
					}
				});
		}
		}

	</script>

	<style type="text/css">
		*{margin:0;padding:0;}
		#kk{
			position: absolute;
			top: 10%;
			left: 37%;
			background-color: white;
			width: 450px;
			height: 300px;
			border:1px solid cadetblue ;
		}
		#bar{
			float: left;
			width:250px;
			height:15px;
			background-color:#ccc;
			overflow:hidden;
		}
		#progress{
			float: left;
			width:0;
			height:30px;
			background-color:#b991ef;
		}
		.now{
			position: relative;
			top: 50%;
			left: 15%;
			right: 20%;
			float: left;
			height: 25px;
			width: 300px;
		}
		.shut{
			border-bottom:1px solid cadetblue ;
			width: 100%;
			height: 30px;
		}
		.shut label {
			float: right;
			position: relative;
			right: 15px;
			line-height: 30px;
			font-weight:bold;
			font-size: 14px;
		}
		.now-time-id{
			position: relative;
			top: 40%;
			width: 70%;
			height: 80px;
			margin: 0 auto;
			border:1px solid cadetblue ;
		}
		.now-id{
			position: relative;
			top: 0px;
			width: 100%;
			height: 40%;
			text-align: center;
		}
		.now-time{
			position: relative;
			bottom: 0px;
			width: 100%;
			height: 60%;
			text-align: center;
		}
		.now-extended{
			position: relative;
			bottom: -45%;
			width: 50%;
			height: 40px;
			margin: 0 auto;
		}
		.extended{
			text-align: center;
			float: left;
			height: 70%;
			width: 40%;
			border:1px solid cadetblue ;
		}
		#overtime{
			border:1px solid cadetblue ;
			width: 200px;
			position: absolute;
			top: 20%;
			left: 43%;
			background-color: honeydew;
		}

	</style>
	<link rel="stylesheet" href="${ctx}/css/pdf/bootstrap.min.css">
	<style>
		#pdf{
			height: 800px;
		}
	</style>
	<script src="http://www.lanrenzhijia.com/ajaxjs/pdfobject.js"></script>
	<script>
		window.onload = function (){
			var myPDF = new PDFObject({ url: "/istepUploadFile/resource/1dd6e22591b64932ac24220867e0b796.pdf" }).embed("pdf");
		};
	</script>
</head>
<body>


<div id="right" class="hide">
	<p style="text-align:center; font-size: 15px"> 回答正确</p>
</div>
</div>

<div id="wrong" class="hide">
	<p style=" text-align:center; font-size: 15px">回答错误</p>
</div>

<%--<div onclick="aaa()">6666666</div>--%>


<ul class="nav nav-tabs">
	<%--<li><a href="${ctx}/resource/resourceCtfSet/stuCtfSetList/">CTF题目集列表</a></li>--%>
	<li class="active"><a
			href="${ctx}/resource/resourceCtfSubject/raceEnterCtfSubjectForm?CtfSubjectId=${param.CtfSubjectId}">题目详情</a>
	</li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="resourceCtfSubject" action="#" method="post" class="form-horizontal">
	<form:hidden path="id"/>
	<sys:message content="${message}"/>

	<input type="hidden" value="${judge}" name="judge" id="judge">
	<input type="hidden" value="${user}" name="user" id="user">
	<input type="hidden" value="${paw}" name="paw" id="paw">
	<input type="hidden" value="${repertoryId}" name="repertoryId" id="repertoryId">
	<input type="hidden" value="${scheduleId}" name="scheduleId" id="scheduleId">
	<input type="hidden" value="${subjectId}" name="subjectId" id="subjectId">
	<input type="hidden" value="${resourceCtfSubject}" name="resourceCtfSubject" id="resourceCtfSubject">
	<input type="hidden" value="${userId}" name="userId" id="userId">


	<div class="control-group">
		<label class="control-label">分值：</label>

		<div class="controls">
			<label class="lbl">${resourceCtfSubject.score}</label>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label">类型：</label>

		<div class="controls">
			<label class="lbl">${resourceCtfSubject.ctfSubjectTypeId}</label>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label">答题情况：</label>

		<div class="controls">
			<label class="lbl" id="answerSituation" name="answerSituation">
				<c:choose>
					<c:when test="${isAnswered=='false'}">
						未解答
					</c:when>
					<c:otherwise>
						已解答
					</c:otherwise>
				</c:choose>
			</label>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label">题目：</label>

		<div class="controls">
			<label class="lbl">${resourceCtfSubject.stem}</label>
		</div>
	</div>
	<c:if test="${resourceCtfSubject.attachment!=null&&resourceCtfSubject.attachment!=''}">
		<div class="control-group">
			<div class="controls">
				<a href="${ctx}/resource/resourceCtfSubject/downloadDocFiles?ctfSubjectId=${resourceCtfSubject.id}">点击下载附件</a>
			</div>
		</div>
	</c:if>

	<%--<div class="control-group">--%>
	<%--<label class="control-label">是否关联实验环境：</label>--%>
	<%--<div class="controls">--%>
	<%--<label class="lbl">${resourceCtfSubject.ctfEnvironmentId}</label>--%>
	<%--</div>--%>
	<%--</div>--%>
	<c:set var="ctfEnvironmentId" value="${resourceCtfSubject.ctfEnvironmentId}"/>
	<c:set var="tip" value="${tip}"/>

	<c:if test="${not empty ctfEnvironmentId}">
		<c:choose>
			<c:when test="${not empty tip}">
				<div class="control-group">
					<label class="control-label">提示：</label>

					<div class="controls">
						<label>${tip}<label/>
					</div>
				</div>
			</c:when>
			<c:otherwise>
				<div class="control-group">
					<div class="controls">
						<a href="#" onclick="aa('${resourceCtfSubject.ctfEnvironmentId}')">点击创建赛题</a>
					</div>
				</div>
			</c:otherwise>
		</c:choose>

	</c:if>
	<c:if test="${resourceCtfSubject.solution!=null&&resourceCtfSubject.solution!=''}">
		<div class="control-group">
			<div class="controls">
				<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
					查看解题思路
				</button>
					<%--<a href="${ctx}/resource/resourceCtfSubject/lookSolution?ctfSubjectId=${resourceCtfSubject.id}" target="_blank">查看解题思路</a>--%>
			</div>
		</div>
	</c:if>
	<input type="hidden" id="ctfEnvironmentId" name="ctfEnvironmentId" value="${resourceCtfSubject.ctfEnvironmentId}">
	<%--<input type="button" id="btn" value="免费获取验证码" onclick="setTime(this)" />--%>
	<input type="hidden" id="ctfsubjectId" name="ctfsubjectId" value="${resourceCtfSubject.id}">
	<input type="hidden" id="answer" name="answer" value="${resourceCtfSubject.answer}">

	<div class="control-group">
		<label class="control-label">Flag：</label>

		<div class="controls">
			<input type="text" name="userAnswer" id="userAnswer" htmlEscape="false" maxlength="100"
				   class="input-xlarge required"/>
		</div>
	</div>
	<%--<div class="control-group">--%>
	<%--<label class="control-label">解题思路：</label>--%>
	<%--<div class="controls">--%>
	<%--<form:textarea path="solution" htmlEscape="false" rows="4" maxlength="255" class="input-xxlarge" readonly="true"/>--%>
	<%--</div>--%>
	<%--</div>--%>
	<div class="form-actions">
		<shiro:hasPermission name="teach:teachStudent:edit">
			<input id="btnSubmit" class="btn btn-primary" type="button" value="提 交" onclick="judge1()"/>&nbsp;</shiro:hasPermission>
		<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
	</div>
</form:form>

<div onclick="kk()" id="kk"  <%--class="hide" --%> style="display:none">
	<div class="shut"><label onclick="shut()">X</label></div>
	<%--进度条--%>
	<div <%--style=" margin-left: 10%;margin-top: 50px; height: 200px;"--%> class="now" id="now">
		<div id="bar">
			<div id="progress"></div>
		</div>
		<label id="ww">0</label>
	</div>
	<%--id跟时间--%>
	<div class="now-time-id" id="now-time-id" style="display:none">
		<div class="now-id"><a href="#" id="link" target="_blank"></a></div>
		<div class="now-time"><label>                <%--//2017-6-29 22:00:00--%>
			<input id="time" name="time" type="hidden" value="120">
			<strong id="hour_show">00:</strong>
			<strong id="minute_show">00:</strong>
			<strong id="second_show">00</strong>
		</label></div>
	</div>
	<div class="now-extended" id="now-extended" style="display:none">
		<div class="extended,hide" onclick="overtime()">延长比赛时间</div>
	</div>
</div>


<%--延长比赛时间--%>
<div id="overtime" style="display:none">
	<div id="importForm" class="form-search" style="padding-left:20px;text-align:center;"><br/>
		<input name="timeId" id="timeId" style="width: 30px" type="hidden"/><br/>
		延长 <input id="prolong" name="time" style="width: 30px" type="text"/>分钟<br/><br/>

		<div id="btnImportSubmit" onclick="btn()" class="btn btn-primary">确定</div>
		<br/>
		<input style="width: 30px" type="hidden"/><br/>
	</div>
</div>


<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<div class="col-lg-pull-12" id="pdf"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

<%--<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>--%>
<%--<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>--%>


</body>
</html>